Skip to content

Commit 621e2f3

Browse files
jsuarezgonzjsuarezgonz
authored
Merge pull request #1704 from dxc-technology/rarrojolopez-update-specs
Fix different spec image caption in website
2 parents 4121d3f + cf39d50 commit 621e2f3

File tree

39 files changed

+276
-288
lines changed

39 files changed

+276
-288
lines changed

‎website/screens/components/accordion/specs/AccordionSpecsPage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const sections = [
1919
{
2020
title: "Specifications",
2121
content: (
22-
<Figure caption="Component design specifications">
23-
<Image src={accordionSpecs} alt="Component design specifications" />
22+
<Figure caption="Accordion design specifications">
23+
<Image src={accordionSpecs} alt="Accordion design specifications" />
2424
</Figure>
2525
),
2626
},
@@ -33,8 +33,8 @@ const sections = [
3333
interaction. States: <strong>enabled</strong>, <strong>hover</strong>,{" "}
3434
<strong>focus</strong> and <strong>disabled</strong>.
3535
</DxcParagraph>
36-
<Figure caption="Accordion component states">
37-
<Image src={accordionStates} alt="Accordion component states" />
36+
<Figure caption="Accordion states">
37+
<Image src={accordionStates} alt="Accordion states" />
3838
</Figure>
3939
</>
4040
),

‎website/screens/components/accordion/usage/AccordionUsagePage.tsx‎

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,8 @@ const sections = [
7878
Accordions can be placed with main page content or placed inside
7979
of a container such as a side panel or tile.
8080
</DxcParagraph>
81-
<Figure caption="Component placement examples">
82-
<Image
83-
src={accordionPlacement}
84-
alt="Component placement examples"
85-
/>
81+
<Figure caption="Accordion placement">
82+
<Image src={accordionPlacement} alt="Accordion placement" />
8683
</Figure>
8784
</>
8885
),
@@ -96,21 +93,21 @@ const sections = [
9693
header. This allows for the title on the start side to align with
9794
other type elements in the layout.
9895
</DxcParagraph>
99-
<Image
100-
src={accordionAlignment}
101-
alt="Component elements alignment"
102-
/>
103-
<DxcParagraph>
104-
<em>
105-
<strong>Left</strong>. Place chevron icon at the end of the
106-
accordion header.
107-
</em>
108-
</DxcParagraph>
109-
<DxcParagraph>
110-
<em>
111-
<strong>Right</strong>. Don’t place caret icon on the left.
112-
</em>
113-
</DxcParagraph>
96+
<Figure
97+
caption={
98+
<>
99+
<DxcParagraph>
100+
<strong>Left</strong>. Place chevron icon at the end of the
101+
accordion header.
102+
</DxcParagraph>
103+
<DxcParagraph>
104+
<strong>Right</strong>. Don’t place caret icon on the left.
105+
</DxcParagraph>
106+
</>
107+
}
108+
>
109+
<Image src={accordionAlignment} alt="Accordion alignment" />
110+
</Figure>
114111
</>
115112
),
116113
},
@@ -153,19 +150,22 @@ const sections = [
153150
</DxcBulletedList>
154151
</DxcFlex>
155152
</DxcBulletedList>
156-
<Image src={accordionTriggers} alt="Accordion trigger usage" />
157-
<DxcParagraph>
158-
<em>
159-
<strong>Left</strong>. Trigger collapsed and expanded states when
160-
clicking on either the header or icon.
161-
</em>
162-
</DxcParagraph>
163-
<DxcParagraph>
164-
<em>
165-
<strong>Right</strong>. Leave the header without caret or use a
166-
button to trigger the expand/collapse action.
167-
</em>
168-
</DxcParagraph>
153+
<Figure
154+
caption={
155+
<>
156+
<DxcParagraph>
157+
<strong>Left</strong>. Trigger collapsed and expanded states
158+
when clicking on either the header or icon.
159+
</DxcParagraph>
160+
<DxcParagraph>
161+
<strong>Right</strong>. Leave the header without caret or use a
162+
button to trigger the expand/collapse action.
163+
</DxcParagraph>
164+
</>
165+
}
166+
>
167+
<Image src={accordionTriggers} alt="Accordion trigger usage" />
168+
</Figure>
169169
</>
170170
),
171171
subSections: [
@@ -205,8 +205,8 @@ const sections = [
205205
</em>
206206
</DxcParagraph>
207207
<DxcParagraph>
208-
<Figure caption="Component placement examples">
209-
<Image src={accordionMultiExpand} alt="image" />
208+
<Figure caption="Accordion group placement">
209+
<Image src={accordionMultiExpand} alt="Accordion group placement" />
210210
</Figure>
211211
</DxcParagraph>
212212
<DxcParagraph>
@@ -227,19 +227,22 @@ const sections = [
227227
and every custom feature that can be supported inside the element
228228
container.
229229
</DxcParagraph>
230-
<Image src={accordionContent} alt="Nesting and icon usage examples" />
231-
<DxcParagraph>
232-
<em>
233-
<strong>Left</strong>. Nesting is allowed. Use in parent accordion
234-
Open Sans Semibold.
235-
</em>
236-
</DxcParagraph>
237-
<DxcParagraph>
238-
<em>
239-
<strong>Right</strong>. Icons can be used as a complement to the
240-
header label.
241-
</em>
242-
</DxcParagraph>
230+
<Figure
231+
caption={
232+
<>
233+
<DxcParagraph>
234+
<strong>Left</strong>. Nesting is allowed. Use in parent
235+
accordion Open Sans Semibold.
236+
</DxcParagraph>
237+
<DxcParagraph>
238+
<strong>Right</strong>. Icons can be used as a complement to the
239+
header label.
240+
</DxcParagraph>
241+
</>
242+
}
243+
>
244+
<Image src={accordionContent} alt="Nesting and icon usage examples" />
245+
</Figure>
243246
</>
244247
),
245248
},

‎website/screens/components/alert/specs/AlertSpecsPage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const sections = [
1919
{
2020
title: "Specifications",
2121
content: (
22-
<Figure caption="Component design specifications">
23-
<Image src={AlertSpecsImage} alt="Component design specifications" />
22+
<Figure caption="Alert design specifications">
23+
<Image src={AlertSpecsImage} alt="Alert design specifications" />
2424
</Figure>
2525
),
2626
},
@@ -33,8 +33,8 @@ const sections = [
3333
<strong>enabled</strong>, <strong>hover</strong>,{" "}
3434
<strong>focus</strong>, and <strong>active</strong>.
3535
</DxcParagraph>
36-
<Figure caption="Alert action specs">
37-
<Image src={AlertStatesImage} alt="Alert action specs" />
36+
<Figure caption="Alert states">
37+
<Image src={AlertStatesImage} alt="Alert states" />
3838
</Figure>
3939
</>
4040
),

‎website/screens/components/application-layout/specs/ApplicationLayoutSpecsPage.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {
2-
DxcLink,
32
DxcBulletedList,
43
DxcParagraph,
54
DxcFlex,

‎website/screens/components/box/specs/BoxSpecsPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ const sections = [
1515
{
1616
title: "Specifications",
1717
content: (
18-
<Figure caption="Component design specifications">
19-
<Image src={boxSpecs} alt="Component design specifications" />
18+
<Figure caption="Box design specifications">
19+
<Image src={boxSpecs} alt="Box design specifications" />
2020
</Figure>
2121
),
2222
},

‎website/screens/components/button/specs/ButtonSpecsPage.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,8 @@ const sections = [
1919
{
2020
title: "Specifications",
2121
content: (
22-
<Figure caption="Design specifications for button component">
23-
<Image
24-
src={buttonSpecsImage}
25-
alt="Design specifications for button component"
26-
/>
22+
<Figure caption="Button design specifications">
23+
<Image src={buttonSpecsImage} alt="Button design specifications" />
2724
</Figure>
2825
),
2926
},
@@ -41,8 +38,8 @@ const sections = [
4138
<strong>focus</strong>, <strong>active</strong> and{" "}
4239
<strong>disabled</strong>.
4340
</DxcParagraph>
44-
<Figure caption="Button component states">
45-
<Image src={buttonStatesImage} alt="Button component states" />
41+
<Figure caption="Button states">
42+
<Image src={buttonStatesImage} alt="Button states" />
4643
</Figure>
4744
</>
4845
),

‎website/screens/components/card/specs/CardSpecsPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const sections = [
3131
Component states: <strong>enabled</strong>, <strong>hover</strong> and{" "}
3232
<strong>focus</strong>.
3333
</DxcParagraph>
34-
<Figure caption="Card component states">
35-
<Image src={statesImage} alt="Card component states" />
34+
<Figure caption="Card states">
35+
<Image src={statesImage} alt="Card states" />
3636
</Figure>
3737
</>
3838
),

‎website/screens/components/checkbox/specs/CheckboxSpecsPage.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const sections = [
1919
{
2020
title: "Specifications",
2121
content: (
22-
<Figure caption="Component design specifications">
23-
<Image src={checkboxSpecs} alt="Component design specifications" />
22+
<Figure caption="Checkbox design specifications">
23+
<Image src={checkboxSpecs} alt="Checkbox design specifications" />
2424
</Figure>
2525
),
2626
},
@@ -37,8 +37,8 @@ const sections = [
3737
<strong>selected focus</strong> and{" "}
3838
<strong>selected disabled.</strong>
3939
</DxcParagraph>
40-
<Figure caption="Checkbox component states.">
41-
<Image src={checkboxStates} alt="Checkbox component states." />
40+
<Figure caption="Checkbox states">
41+
<Image src={checkboxStates} alt="Checkbox states" />
4242
</Figure>
4343
</>
4444
),

‎website/screens/components/chip/specs/ChipSpecsPage.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const sections = [
1919
{
2020
title: "Specifications",
2121
content: (
22-
<Figure caption="Component chip design specifications">
23-
<Image src={specsImage} alt="Component chip design specifications" />
22+
<Figure caption="Chip design specifications">
23+
<Image src={specsImage} alt="Chip design specifications" />
2424
</Figure>
2525
),
2626
},
@@ -32,8 +32,8 @@ const sections = [
3232
The chip component container states are <strong>enabled</strong> and{" "}
3333
<strong>disabled</strong>:
3434
</DxcParagraph>
35-
<Figure caption="Chip container states">
36-
<Image src={statesImage} alt="Chip container states" />
35+
<Figure caption="Chip states">
36+
<Image src={statesImage} alt="Chip states" />
3737
</Figure>
3838
<DxcParagraph>
3939
The chip action item has the following states:{" "}
@@ -54,7 +54,7 @@ const sections = [
5454
title: "Anatomy",
5555
content: (
5656
<>
57-
<Image src={anatomyImage} alt="Component anatomy" />
57+
<Image src={anatomyImage} alt="Chip anatomy" />
5858
<DxcBulletedList type="number">
5959
<DxcBulletedList.Item>Container</DxcBulletedList.Item>
6060
<DxcBulletedList.Item>

‎website/screens/components/date-input/specs/DateInputSpecsPage.tsx‎

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ const sections = [
5252
{
5353
title: "Date picker dialog",
5454
content: (
55-
<Figure caption="Structure and spacing for the date picker pop-up">
56-
<Image src={datePopupSpecs} alt="Date specifications for picker" />
55+
<Figure caption="Date picker design specifications">
56+
<Image src={datePopupSpecs} alt="Date picker design specifications" />
5757
</Figure>
5858
),
5959
},
@@ -69,11 +69,8 @@ const sections = [
6969
<strong>focus</strong>, <strong>error</strong>, and{" "}
7070
<strong>disabled</strong>.
7171
</DxcParagraph>
72-
<Figure caption="Examples of the date input states">
73-
<Image
74-
src={dateSpecsStates}
75-
alt="Examples of the date input states"
76-
/>
72+
<Figure caption="Date input states">
73+
<Image src={dateSpecsStates} alt="Date input states" />
7774
</Figure>
7875
</>
7976
),
@@ -88,11 +85,8 @@ const sections = [
8885
<strong>selected</strong>, <strong>today</strong> and{" "}
8986
<strong>disabled</strong>.
9087
</DxcParagraph>
91-
<Figure caption="Examples of a calendar day states">
92-
<Image
93-
src={dateSpecsPopup}
94-
alt="Examples of a calendar day states"
95-
/>
88+
<Figure caption="Calendar day states">
89+
<Image src={dateSpecsPopup} alt="Calendar day states" />
9690
</Figure>
9791
</>
9892
),
@@ -103,7 +97,7 @@ const sections = [
10397
title: "Anatomy",
10498
content: (
10599
<>
106-
<Image src={dateSpecsAnatomy} alt="Component anatomy example" />
100+
<Image src={dateSpecsAnatomy} alt="Date input anatomy" />
107101
<DxcBulletedList type="number">
108102
<DxcBulletedList.Item>Label</DxcBulletedList.Item>
109103
<DxcBulletedList.Item>

0 commit comments

Comments
 (0)