From c50f36789f883c4c510d14e3787131e758e3866f Mon Sep 17 00:00:00 2001 From: Rashika Date: Fri, 16 Dec 2022 15:22:41 +0530 Subject: [PATCH 1/6] docs(PPDSC-2561): docs(PPDSC-2561) update titles in usage section --- site/components/usage-card/types.ts | 1 + site/components/usage-card/usage-card.tsx | 47 +++++++++++++------ site/pages/components/text-area.tsx | 38 ++++++++------- .../components/text-area/usage/do-01.svg | 17 ++++++- .../components/text-area/usage/do-02.svg | 42 ++++++++++++++++- .../components/text-area/usage/do-03.svg | 21 ++++++++- .../components/text-area/usage/do-04.svg | 1 - .../components/text-area/usage/dont-01.svg | 25 +++++++++- .../components/text-area/usage/dont-02.svg | 17 ++++++- .../components/text-area/usage/dont-03.svg | 46 +++++++++++++++++- 10 files changed, 217 insertions(+), 38 deletions(-) delete mode 100644 site/public/static/illustrations/components/text-area/usage/do-04.svg diff --git a/site/components/usage-card/types.ts b/site/components/usage-card/types.ts index c6709f17ff..c49d991e8d 100644 --- a/site/components/usage-card/types.ts +++ b/site/components/usage-card/types.ts @@ -10,6 +10,7 @@ export interface KindConfig { export interface UsageCardProps extends Omit { description?: string | React.ReactElement; kind?: UsageKind; + title?: string; } export enum UsageKind { diff --git a/site/components/usage-card/usage-card.tsx b/site/components/usage-card/usage-card.tsx index 9621ddbe02..560d3254a5 100644 --- a/site/components/usage-card/usage-card.tsx +++ b/site/components/usage-card/usage-card.tsx @@ -24,6 +24,7 @@ const kindMap: Record = { export const UsageCard: React.FC = ({ kind = UsageKind.DO, + title, description, media, }) => { @@ -49,21 +50,37 @@ export const UsageCard: React.FC = ({ }, }} > - - - - - - {heading} - - + {title ? ( + + + + + + {title} + + + + ) : ( + + + + + {heading} + + + )} ( ], }} usage={{ - introduction: - 'The following guidance describes how and when to appropriately use the text area component.', + introduction: 'Here’s how and when to use the text area:', cards: [ { + title: 'Do use propotional heights', description: ( <> The height of the text area input container should be proportional @@ -686,6 +686,7 @@ const TextAreaComponent = (layoutProps: LayoutProps) => ( media: getIllustrationComponent('components/text-area/usage/do-01'), }, { + title: "Don't use text areas for single line inputs", description: ( <> Avoid using text areas if you need to let users enter shorter @@ -698,30 +699,28 @@ const TextAreaComponent = (layoutProps: LayoutProps) => ( media: getIllustrationComponent('components/text-area/usage/dont-01'), }, { + title: 'Do allow users to copy and paste text', description: - 'Users should have the ability to copy and paste information into the text area input container.', + 'Allow users to copy and paste text into the text area input container.', kind: UsageKind.DO, media: getIllustrationComponent('components/text-area/usage/do-02'), }, { + title: + "Don't use text areas to capture multiple pieces of information", description: 'Avoid using text areas to capture multiple pieces of information from users, as this increases cognitive load. Instead, consider using multiple text areas, or text fields.', kind: UsageKind.DONT, media: getIllustrationComponent('components/text-area/usage/dont-02'), }, + // { + // description: + // 'Swap assistive text with error text, or character count as required. Once the input is valid then the assistive text or character count is then shown again.', + // kind: UsageKind.DO, + // media: getIllustrationComponent('components/text-area/usage/do-03'), + // }, { - description: - 'Swap assistive text with error text, or character count as required. Once the input is valid then the assistive text or character count is then shown again.', - kind: UsageKind.DO, - media: getIllustrationComponent('components/text-area/usage/do-03'), - }, - { - description: - 'Avoid limiting the number of characters users can enter unless there is a specific requirement for doing so.', - kind: UsageKind.DONT, - media: getIllustrationComponent('components/text-area/usage/dont-03'), - }, - { + title: 'Do provide a label for context', description: ( <> Text areas should have a{' '} @@ -730,7 +729,14 @@ const TextAreaComponent = (layoutProps: LayoutProps) => ( ), kind: UsageKind.DO, - media: getIllustrationComponent('components/text-area/usage/do-04'), + media: getIllustrationComponent('components/text-area/usage/do-03'), + }, + { + title: "Don't block a user from entering information", + description: + 'Avoid limiting the number of characters users can enter unless there is a specific requirement for doing so.', + kind: UsageKind.DONT, + media: getIllustrationComponent('components/text-area/usage/dont-03'), }, ], }} diff --git a/site/public/static/illustrations/components/text-area/usage/do-01.svg b/site/public/static/illustrations/components/text-area/usage/do-01.svg index 1f47295311..4d3e3b6345 100644 --- a/site/public/static/illustrations/components/text-area/usage/do-01.svg +++ b/site/public/static/illustrations/components/text-area/usage/do-01.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/site/public/static/illustrations/components/text-area/usage/do-02.svg b/site/public/static/illustrations/components/text-area/usage/do-02.svg index c3d18d5615..cdd52010b8 100644 --- a/site/public/static/illustrations/components/text-area/usage/do-02.svg +++ b/site/public/static/illustrations/components/text-area/usage/do-02.svg @@ -1 +1,41 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/public/static/illustrations/components/text-area/usage/do-03.svg b/site/public/static/illustrations/components/text-area/usage/do-03.svg index 6dc27c2c74..e2543fba9a 100644 --- a/site/public/static/illustrations/components/text-area/usage/do-03.svg +++ b/site/public/static/illustrations/components/text-area/usage/do-03.svg @@ -1 +1,20 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/site/public/static/illustrations/components/text-area/usage/do-04.svg b/site/public/static/illustrations/components/text-area/usage/do-04.svg deleted file mode 100644 index a3d06b81d9..0000000000 --- a/site/public/static/illustrations/components/text-area/usage/do-04.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/site/public/static/illustrations/components/text-area/usage/dont-01.svg b/site/public/static/illustrations/components/text-area/usage/dont-01.svg index 5469d96ef0..cbd7391cc1 100644 --- a/site/public/static/illustrations/components/text-area/usage/dont-01.svg +++ b/site/public/static/illustrations/components/text-area/usage/dont-01.svg @@ -1 +1,24 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/public/static/illustrations/components/text-area/usage/dont-02.svg b/site/public/static/illustrations/components/text-area/usage/dont-02.svg index 48549d4d2e..e921b6c6ba 100644 --- a/site/public/static/illustrations/components/text-area/usage/dont-02.svg +++ b/site/public/static/illustrations/components/text-area/usage/dont-02.svg @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/site/public/static/illustrations/components/text-area/usage/dont-03.svg b/site/public/static/illustrations/components/text-area/usage/dont-03.svg index 150773966b..d4e56f432b 100644 --- a/site/public/static/illustrations/components/text-area/usage/dont-03.svg +++ b/site/public/static/illustrations/components/text-area/usage/dont-03.svg @@ -1 +1,45 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From c9d8d9a6565b0579203d274eb77c98759d57f51f Mon Sep 17 00:00:00 2001 From: Rashika Date: Fri, 16 Dec 2022 15:51:20 +0530 Subject: [PATCH 2/6] docs(PPDSC-2561): docs(PPDSC-2561) build fix --- site/components/usage-card/types.ts | 2 +- site/components/usage-card/usage-card.tsx | 2 +- site/pages/components/text-area.tsx | 6 ------ 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/site/components/usage-card/types.ts b/site/components/usage-card/types.ts index c49d991e8d..8f82f9d7de 100644 --- a/site/components/usage-card/types.ts +++ b/site/components/usage-card/types.ts @@ -1,6 +1,7 @@ import {CardProps} from 'newskit'; export interface KindConfig { + title?: string; heading: string; iconComponent: React.ComponentType; dividerStylePreset: string; @@ -10,7 +11,6 @@ export interface KindConfig { export interface UsageCardProps extends Omit { description?: string | React.ReactElement; kind?: UsageKind; - title?: string; } export enum UsageKind { diff --git a/site/components/usage-card/usage-card.tsx b/site/components/usage-card/usage-card.tsx index 560d3254a5..65120b1828 100644 --- a/site/components/usage-card/usage-card.tsx +++ b/site/components/usage-card/usage-card.tsx @@ -24,11 +24,11 @@ const kindMap: Record = { export const UsageCard: React.FC = ({ kind = UsageKind.DO, - title, description, media, }) => { const { + title, iconComponent: Icon, heading, dividerStylePreset, diff --git a/site/pages/components/text-area.tsx b/site/pages/components/text-area.tsx index 3c03708235..85023e7edd 100644 --- a/site/pages/components/text-area.tsx +++ b/site/pages/components/text-area.tsx @@ -713,12 +713,6 @@ const TextAreaComponent = (layoutProps: LayoutProps) => ( kind: UsageKind.DONT, media: getIllustrationComponent('components/text-area/usage/dont-02'), }, - // { - // description: - // 'Swap assistive text with error text, or character count as required. Once the input is valid then the assistive text or character count is then shown again.', - // kind: UsageKind.DO, - // media: getIllustrationComponent('components/text-area/usage/do-03'), - // }, { title: 'Do provide a label for context', description: ( From c089bfeee23d236e8f3e0ed3095db46c78ae0279 Mon Sep 17 00:00:00 2001 From: Rashika Date: Fri, 16 Dec 2022 16:29:38 +0530 Subject: [PATCH 3/6] docs(PPDSC-2561): docs(PPDSC-2561) build fix --- .../__tests__/__snapshots__/media-list.test.tsx.snap | 4 ++-- .../__tests__/__snapshots__/usage-card.test.tsx.snap | 8 ++++---- site/components/usage-card/types.ts | 2 +- site/components/usage-card/usage-card.tsx | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap index 0fbd5479cd..6b79a4f2b8 100644 --- a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap +++ b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap @@ -2078,8 +2078,8 @@ exports[`Media List renders with usage cards 1`] = ` .emotion-15 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 20px; + line-height: 22.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap index 35d7c4da81..2d0f0bf150 100644 --- a/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap +++ b/site/components/usage-card/__tests__/__snapshots__/usage-card.test.tsx.snap @@ -154,8 +154,8 @@ exports[`UsageCard Renders Dont UsageCard when kind=dont 1`] = ` .emotion-11 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 20px; + line-height: 22.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; @@ -439,8 +439,8 @@ exports[`UsageCard Renders default (Do) UsageCard 1`] = ` .emotion-11 { font-family: "Poppins",sans-serif; - font-size: 24px; - line-height: 27px; + font-size: 20px; + line-height: 22.5px; font-weight: 700; letter-spacing: 0; padding: 0.5px 0px; diff --git a/site/components/usage-card/types.ts b/site/components/usage-card/types.ts index 8f82f9d7de..8bc0b5c7f6 100644 --- a/site/components/usage-card/types.ts +++ b/site/components/usage-card/types.ts @@ -1,7 +1,6 @@ import {CardProps} from 'newskit'; export interface KindConfig { - title?: string; heading: string; iconComponent: React.ComponentType; dividerStylePreset: string; @@ -9,6 +8,7 @@ export interface KindConfig { } export interface UsageCardProps extends Omit { + title?: string; description?: string | React.ReactElement; kind?: UsageKind; } diff --git a/site/components/usage-card/usage-card.tsx b/site/components/usage-card/usage-card.tsx index 65120b1828..560d3254a5 100644 --- a/site/components/usage-card/usage-card.tsx +++ b/site/components/usage-card/usage-card.tsx @@ -24,11 +24,11 @@ const kindMap: Record = { export const UsageCard: React.FC = ({ kind = UsageKind.DO, + title, description, media, }) => { const { - title, iconComponent: Icon, heading, dividerStylePreset, From b7c8b38e705385e8405b7acc5d5a8fd33563908b Mon Sep 17 00:00:00 2001 From: Rashika Date: Fri, 16 Dec 2022 16:57:03 +0530 Subject: [PATCH 4/6] docs(PPDSC-2561): docs(PPDSC-2561) build snap issue fix --- .../__snapshots__/media-list.test.tsx.snap | 60 +++++++------------ 1 file changed, 22 insertions(+), 38 deletions(-) diff --git a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap index 6b79a4f2b8..04c9991042 100644 --- a/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap +++ b/site/components/media-list/__tests__/__snapshots__/media-list.test.tsx.snap @@ -2076,7 +2076,9 @@ exports[`Media List renders with usage cards 1`] = ` width: 100%; } -.emotion-15 { +.emotion-16 { + margin: 0; + color: #09111C; font-family: "Poppins",sans-serif; font-size: 20px; line-height: 22.5px; @@ -2085,29 +2087,22 @@ exports[`Media List renders with usage cards 1`] = ` padding: 0.5px 0px; } -.emotion-15::before { +.emotion-16 svg { + fill: #09111C; +} + +.emotion-16::before { content: ''; margin-bottom: -0.2155em; display: block; } -.emotion-15::after { +.emotion-16::after { content: ''; margin-top: -0.2125em; display: block; } -.emotion-16 { - display: inline; - font: inherit; - margin: 0; - color: #007B22; -} - -.emotion-16 svg { - fill: #007B22; -} - .emotion-18 { margin: 0; color: #2E3F54; @@ -2243,17 +2238,6 @@ exports[`Media List renders with usage cards 1`] = ` width: 100%; } -.emotion-32 { - display: inline; - font: inherit; - margin: 0; - color: #D60000; -} - -.emotion-32 svg { - fill: #D60000; -} -
@@ -2314,15 +2298,15 @@ exports[`Media List renders with usage cards 1`] = `
-
-

Do -

-
+

+
-
-

- Don’t -

-
+ Dont +

+
Date: Wed, 21 Dec 2022 14:58:58 +0530 Subject: [PATCH 5/6] docs(PPDSC-2561): docs(PPDSC-2561) conflicts From bd548482e81a9a9cf3cc61b2d5279a4a7f6f8f3a Mon Sep 17 00:00:00 2001 From: Rashika Date: Wed, 21 Dec 2022 16:08:16 +0530 Subject: [PATCH 6/6] docs(PPDSC-2561): docs(PPDSC-2561) usage section svg --- .../static/illustrations/components/text-area/usage/do-01.svg | 2 +- .../static/illustrations/components/text-area/usage/do-02.svg | 2 +- .../static/illustrations/components/text-area/usage/do-03.svg | 2 +- .../static/illustrations/components/text-area/usage/dont-01.svg | 2 +- .../static/illustrations/components/text-area/usage/dont-02.svg | 2 +- .../static/illustrations/components/text-area/usage/dont-03.svg | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/site/public/static/illustrations/components/text-area/usage/do-01.svg b/site/public/static/illustrations/components/text-area/usage/do-01.svg index a80f22c300..b796eb1e2d 100644 --- a/site/public/static/illustrations/components/text-area/usage/do-01.svg +++ b/site/public/static/illustrations/components/text-area/usage/do-01.svg @@ -1,4 +1,4 @@ - + diff --git a/site/public/static/illustrations/components/text-area/usage/do-02.svg b/site/public/static/illustrations/components/text-area/usage/do-02.svg index fd968ab1f5..b2037232b8 100644 --- a/site/public/static/illustrations/components/text-area/usage/do-02.svg +++ b/site/public/static/illustrations/components/text-area/usage/do-02.svg @@ -1,4 +1,4 @@ - + diff --git a/site/public/static/illustrations/components/text-area/usage/do-03.svg b/site/public/static/illustrations/components/text-area/usage/do-03.svg index 377c22fc41..7ae30d80c6 100644 --- a/site/public/static/illustrations/components/text-area/usage/do-03.svg +++ b/site/public/static/illustrations/components/text-area/usage/do-03.svg @@ -1,4 +1,4 @@ - + diff --git a/site/public/static/illustrations/components/text-area/usage/dont-01.svg b/site/public/static/illustrations/components/text-area/usage/dont-01.svg index b1958f2b70..c52e2c9446 100644 --- a/site/public/static/illustrations/components/text-area/usage/dont-01.svg +++ b/site/public/static/illustrations/components/text-area/usage/dont-01.svg @@ -1,4 +1,4 @@ - + diff --git a/site/public/static/illustrations/components/text-area/usage/dont-02.svg b/site/public/static/illustrations/components/text-area/usage/dont-02.svg index efa01829a1..f3c5afbd6c 100644 --- a/site/public/static/illustrations/components/text-area/usage/dont-02.svg +++ b/site/public/static/illustrations/components/text-area/usage/dont-02.svg @@ -1,4 +1,4 @@ - + diff --git a/site/public/static/illustrations/components/text-area/usage/dont-03.svg b/site/public/static/illustrations/components/text-area/usage/dont-03.svg index 1a3778d8eb..1181e80cc4 100644 --- a/site/public/static/illustrations/components/text-area/usage/dont-03.svg +++ b/site/public/static/illustrations/components/text-area/usage/dont-03.svg @@ -1,4 +1,4 @@ - +