From 770dddf12f253cc2b0985cdbe53d0d411648898f Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Thu, 29 Feb 2024 20:51:53 -0500 Subject: [PATCH 1/3] added a font-weight variation in typography documentation --- apps/docs/.eslintrc.json | 1 + .../components/preview/FontWeightPreview.tsx | 18 ++++++ apps/docs/components/ui/mdx/Mdx.tsx | 2 + .../ui/table/TypographyVariantTable.tsx | 59 +++++++++++++++++++ .../content/tokens/semantic/typography.mdx | 4 ++ 5 files changed, 84 insertions(+) create mode 100644 apps/docs/components/preview/FontWeightPreview.tsx create mode 100644 apps/docs/components/ui/table/TypographyVariantTable.tsx diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json index 512718ec7..c07adc9c5 100644 --- a/apps/docs/.eslintrc.json +++ b/apps/docs/.eslintrc.json @@ -14,6 +14,7 @@ "Card": true, "Table": true, "TypographyTable": true, + "TypographyTableVariation": true, "Tabs": true, "TableSection": true, "Switcher": true, diff --git a/apps/docs/components/preview/FontWeightPreview.tsx b/apps/docs/components/preview/FontWeightPreview.tsx new file mode 100644 index 000000000..2c4b3e499 --- /dev/null +++ b/apps/docs/components/preview/FontWeightPreview.tsx @@ -0,0 +1,18 @@ +import "@hopper-ui/tokens/fonts.css"; +import "./preview.css"; + +interface FontWeightPreviewProps { + values?: TypographyValues; + style?: React.CSSProperties; +} + +interface TypographyValues { + fontWeight?: string; +} + +const FontWeightPreview = ({ values, style }: FontWeightPreviewProps) => { + return
Aa
; +}; + +export default FontWeightPreview; + diff --git a/apps/docs/components/ui/mdx/Mdx.tsx b/apps/docs/components/ui/mdx/Mdx.tsx index 13acc2465..239b19f70 100644 --- a/apps/docs/components/ui/mdx/Mdx.tsx +++ b/apps/docs/components/ui/mdx/Mdx.tsx @@ -10,6 +10,7 @@ import Switcher from "@/components/ui/switcher/Switcher"; import Title from "@/components/ui/title/Title"; import Table from "@/components/ui/table/Table"; import TypographyTable from "@/components/ui/table/TypographyTable"; +import TypographyVariantTable from "@/components/ui/table/TypographyVariantTable"; import Tabs from "@/components/tabs/Tabs"; import TableSection from "@/components/tableSection/TableSection"; @@ -21,6 +22,7 @@ const components = { pre: Pre, Table: Table, TypographyTable: TypographyTable, + TypographyVariantTable: TypographyVariantTable, IconTable: IconTable, IconSpecTable: IconSpecTable, Tabs: Tabs, diff --git a/apps/docs/components/ui/table/TypographyVariantTable.tsx b/apps/docs/components/ui/table/TypographyVariantTable.tsx new file mode 100644 index 000000000..3e6dbff8b --- /dev/null +++ b/apps/docs/components/ui/table/TypographyVariantTable.tsx @@ -0,0 +1,59 @@ +"use client"; + +import React from "react"; +import TypographyPreview from "@/components/preview/TypographyPreview"; +import Code from "@/components/ui/code/Code"; + +import "./table.css"; + +interface TypographyVariantTableProps { + data: Record; +} + +const TypographyVariantTable = ({ data }: TypographyVariantTableProps) => { + const tokenData = data["fontWeight"]; + + const filteredData: Array<{ name: string; value: string }> = tokenData.filter(item => + item.name.includes("bold") || + item.name.includes("semibold") || + item.name.includes("medium") + ); + + const listItems = filteredData.map(item => { + const fontWeight = item.value; + + return ( + + + {item.name} + + {`--${item.name}`} + + + {item.value} + + + + + + + ); + }); + + return ( + + + + + + + + + + {listItems} + +
NameValuePreview
+ ); +}; + +export default TypographyVariantTable; diff --git a/apps/docs/content/tokens/semantic/typography.mdx b/apps/docs/content/tokens/semantic/typography.mdx index 52a1d498f..9d930c65d 100644 --- a/apps/docs/content/tokens/semantic/typography.mdx +++ b/apps/docs/content/tokens/semantic/typography.mdx @@ -50,3 +50,7 @@ Body text is used to communicate the main content of a page. Accent text is used to highlight important information on a page. + +## Font Weight Variations + + From 578341459795036ed0075435692733305f7a225e Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 1 Mar 2024 11:34:08 -0500 Subject: [PATCH 2/3] linting error / filtered variations by type --- apps/docs/.eslintrc.json | 2 +- .../components/ui/table/TypographyVariantTable.tsx | 12 +++++++++--- apps/docs/content/tokens/semantic/typography.mdx | 11 ++++++++--- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/apps/docs/.eslintrc.json b/apps/docs/.eslintrc.json index c07adc9c5..5dc5b6802 100644 --- a/apps/docs/.eslintrc.json +++ b/apps/docs/.eslintrc.json @@ -14,7 +14,7 @@ "Card": true, "Table": true, "TypographyTable": true, - "TypographyTableVariation": true, + "TypographyVariantTable": true, "Tabs": true, "TableSection": true, "Switcher": true, diff --git a/apps/docs/components/ui/table/TypographyVariantTable.tsx b/apps/docs/components/ui/table/TypographyVariantTable.tsx index 3e6dbff8b..841b6c81e 100644 --- a/apps/docs/components/ui/table/TypographyVariantTable.tsx +++ b/apps/docs/components/ui/table/TypographyVariantTable.tsx @@ -8,18 +8,24 @@ import "./table.css"; interface TypographyVariantTableProps { data: Record; + type: string; } -const TypographyVariantTable = ({ data }: TypographyVariantTableProps) => { +const TypographyVariantTable = ({ type, data }: TypographyVariantTableProps) => { const tokenData = data["fontWeight"]; + console.log(type); - const filteredData: Array<{ name: string; value: string }> = tokenData.filter(item => + const filteredDataByType: Array<{ name: string; value: string }> = tokenData.filter(item => + item.name.includes(type) + ); + + const filteredDataByWeightVariation: Array<{ name: string; value: string }> = filteredDataByType.filter(item => item.name.includes("bold") || item.name.includes("semibold") || item.name.includes("medium") ); - const listItems = filteredData.map(item => { + const listItems = filteredDataByWeightVariation.map(item => { const fontWeight = item.value; return ( diff --git a/apps/docs/content/tokens/semantic/typography.mdx b/apps/docs/content/tokens/semantic/typography.mdx index 9d930c65d..7f0340276 100644 --- a/apps/docs/content/tokens/semantic/typography.mdx +++ b/apps/docs/content/tokens/semantic/typography.mdx @@ -31,6 +31,10 @@ Headings are used to create a hierarchy of content. They are used to help users +### Variations + + + ## Overline Used to introduce a headline. @@ -45,12 +49,13 @@ Body text is used to communicate the main content of a page. +### Variations + + + ## Accent Accent text is used to highlight important information on a page. -## Font Weight Variations - - From 0f909d8b2a2fb750003383c837ab24835f12057a Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Fri, 1 Mar 2024 13:37:02 -0500 Subject: [PATCH 3/3] removed console log --- apps/docs/components/ui/table/TypographyVariantTable.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/docs/components/ui/table/TypographyVariantTable.tsx b/apps/docs/components/ui/table/TypographyVariantTable.tsx index 841b6c81e..95dd156ff 100644 --- a/apps/docs/components/ui/table/TypographyVariantTable.tsx +++ b/apps/docs/components/ui/table/TypographyVariantTable.tsx @@ -13,7 +13,6 @@ interface TypographyVariantTableProps { const TypographyVariantTable = ({ type, data }: TypographyVariantTableProps) => { const tokenData = data["fontWeight"]; - console.log(type); const filteredDataByType: Array<{ name: string; value: string }> = tokenData.filter(item => item.name.includes(type)