Skip to content

Commit 451ed0a

Browse files
HHHindawyHossam Hindawymocca102
authored
[psl-2716] create a full featured and styled example (#83)
* psl-2716 create a full featured and styled example * psl-2716 sanitize html before setting it * psl-2716 disable spell checker for dompurify * csl-2716 remove search term highlights * style updates * csl-2716 add search term highlights for suggestions and products * psl-2716 fix EOF * psl-2716 add min height for product images * psl-2716 add min height for suggestion images --------- Co-authored-by: Hossam Hindawy <hossam.hindawy@hossam.hindawy-Q7M9F6QK6G> Co-authored-by: mocca102 <islaam.agamy@gmail.com>
1 parent 231faf6 commit 451ed0a

File tree

5 files changed

+208
-2
lines changed

5 files changed

+208
-2
lines changed

‎.storybook/full-example-styles-story.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
.cio-autocomplete.full-example-autocomplete-styles.header {
2+
position: relative;
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
gap: 20px;
7+
height: 60px;
8+
width: auto;
9+
padding: 15px;
10+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
11+
}
12+
13+
.cio-autocomplete.full-example-autocomplete-styles.header .menu-icon {
14+
position: absolute;
15+
left: 30px;
16+
cursor: pointer;
17+
}
18+
19+
.cio-autocomplete.full-example-autocomplete-styles {
20+
height: 100%;
21+
width: 100%;
22+
background-color: white;
23+
padding: 0px
24+
}
25+
26+
.cio-autocomplete.full-example-autocomplete-styles form {
27+
height: 44px;
28+
width: 450px;
29+
border-radius: 8px;
30+
}
31+
32+
.cio-autocomplete.full-example-autocomplete-styles .cio-input {
33+
border-radius: 100px;
34+
box-sizing: border-box;
35+
box-shadow: none;
36+
border-color: #8080806b;
37+
padding-left: 20px;
38+
}
39+
40+
.cio-autocomplete.full-example-autocomplete-styles .cio-form button {
41+
width: 30px;
42+
background: transparent;
43+
border: none;
44+
margin-right: 10px;
45+
}
46+
47+
.cio-autocomplete.full-example-autocomplete-styles .cio-submit-btn {
48+
display: none;
49+
}
50+
51+
.cio-autocomplete.full-example-autocomplete-styles .cio-submit-btn:disabled {
52+
right: 0;
53+
display: block;
54+
}
55+
56+
.cio-autocomplete.full-example-autocomplete-styles .cio-clear-btn {
57+
right: 0;
58+
}
59+
60+
.cio-autocomplete.full-example-autocomplete-styles .cio-sectionName {
61+
margin: 5px 3px;
62+
}
63+
64+
.cio-autocomplete.full-example-autocomplete-styles .cio-results {
65+
width: 690px;
66+
max-height: fit-content;
67+
overflow: hidden;
68+
box-shadow: 0 0px 3px 0 rgba(0, 0, 0, -0.8), 0 -0.1px 8px 0 rgba(0, 0, 0, 0.19);
69+
border-radius: 4px;
70+
padding: 25px;
71+
left: -30%;
72+
color: rgb(70, 70, 70);
73+
}
74+
75+
.cio-autocomplete.full-example-autocomplete-styles .Products.cio-section {
76+
padding: 0px;
77+
}
78+
79+
.cio-autocomplete.full-example-autocomplete-styles .Products .cio-item-Products {
80+
width: 120px !important;
81+
height: fit-content;
82+
padding: 15px;
83+
}
84+
85+
.cio-autocomplete.full-example-autocomplete-styles .Products .cio-section-items {
86+
text-align: center;
87+
}
88+
89+
.cio-autocomplete.full-example-autocomplete-styles .Products .cio-product-text {
90+
padding: 15px 5px 0;
91+
}
92+
93+
.cio-autocomplete.full-example-autocomplete-styles .Products .cio-item .cio-product-image {
94+
width: 100%;
95+
height: 100%;
96+
min-height: 200px;
97+
max-width: unset;
98+
max-height: unset;
99+
}
100+
101+
.cio-autocomplete.full-example-autocomplete-styles .cio-item[aria-selected='true'] {
102+
background-color: transparent;
103+
text-decoration: underline;
104+
border-radius: 0px;
105+
}
106+
107+
.cio-autocomplete.full-example-autocomplete-styles .Products p {
108+
padding: 5px 5px 0;
109+
}
110+
111+
.cio-autocomplete.full-example-autocomplete-styles .cio-icon svg {
112+
width: 20px;
113+
height: 20px;
114+
}
115+
116+
.cio-autocomplete.full-example-autocomplete-styles .cio-suggestion-image {
117+
height: 100%;
118+
min-height: 45px;
119+
}
120+
121+
@media screen and (max-width: 690px) {
122+
.cio-autocomplete.full-example-autocomplete-styles .cio-results {
123+
left: 0;
124+
right: 0;
125+
width: unset;
126+
}
127+
128+
.cio-autocomplete.full-example-autocomplete-styles .Products.cio-section {
129+
display: none;
130+
}
131+
}
132+
133+
@media screen and (max-width: 600px) {
134+
.cio-autocomplete.full-example-autocomplete-styles.header .menu-icon {
135+
display: none;
136+
}
137+
}
138+
139+
@media screen and (max-width: 480px) {
140+
.cio-autocomplete.full-example-autocomplete-styles.header > div {
141+
width: 100%;
142+
}
143+
144+
.cio-autocomplete.full-example-autocomplete-styles form {
145+
width: 100%;
146+
}
147+
}

‎.storybook/preview.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Title, Description, Stories } from '@storybook/addon-docs';
22
import './custom-styles-story.css';
3+
import './full-example-styles-story.css';
34
import './storybook-styles.css';
45
import '../src/styles.css';
56

‎src/constants.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ export const zeroStateDescription = `- when the text input field has no text, we
105105
// Storybook Stories
106106
/// //////////////////////////////
107107

108+
export const fullFeaturedAndStyledExampleDescription = `Using the default options, the library displays clean and minimal visual elements, with the intent of making it easy for consumers to easily extend and customize the styles to suit unique needs. The example below shows a full featured and styled example to demonstrate what is possible using Constructor.io's advanced Autocomplete UI library.`;
109+
108110
export const apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
109111
export const cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from constructor's servers
110112

‎src/stories/Autocomplete/Component/index.stories.tsx‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import ConstructorIOClient from '@constructor-io/constructorio-client-javascript
22
import { CioAutocomplete } from '../../../index';
33
import { argTypes } from '../argTypes';
44
import { functionStrings, stringifyWithDefaults } from '../../../utils';
5-
import { ComponentTemplate, addComponentStoryDescription } from '.';
5+
import { ComponentTemplate, FullExampleTemplate, addComponentStoryDescription } from '.';
66
import {
7+
fullFeaturedAndStyledExampleDescription,
78
apiKeyDescription,
89
cioJsClientDescription,
910
componentDescription,
@@ -26,6 +27,48 @@ export default {
2627
},
2728
};
2829

30+
let autocompleteClassName = 'cio-autocomplete full-example-autocomplete-styles';
31+
32+
export const FullFeaturedAndStyledExample = FullExampleTemplate.bind({});
33+
FullFeaturedAndStyledExample.args = {
34+
apiKey,
35+
onSubmit,
36+
autocompleteClassName,
37+
placeholder: 'What can we help you find?',
38+
advancedParameters: {
39+
displaySearchSuggestionImages: true,
40+
displaySearchSuggestionResultCounts: true,
41+
numTermsWithGroupSuggestions: 6,
42+
},
43+
sections: [
44+
{
45+
identifier: 'Search Suggestions',
46+
numResults: 8,
47+
displaySearchTermHighlights: true,
48+
},
49+
{
50+
identifier: 'Products',
51+
numResults: 6,
52+
displaySearchTermHighlights: true,
53+
},
54+
],
55+
zeroStateSections: [
56+
{
57+
identifier: 'bestsellers',
58+
type: 'recommendations',
59+
section: 'Products',
60+
numResults: 6,
61+
},
62+
],
63+
};
64+
addComponentStoryDescription(
65+
FullFeaturedAndStyledExample,
66+
`import '@constructor-io/constructorio-ui-autocomplete/styles.css';
67+
68+
const args = ${stringifyWithDefaults(FullFeaturedAndStyledExample.args)}`,
69+
fullFeaturedAndStyledExampleDescription
70+
);
71+
2972
export const ProvideAPIKey = ComponentTemplate.bind({});
3073
ProvideAPIKey.args = { apiKey, onSubmit };
3174
addComponentStoryDescription(
@@ -58,7 +101,7 @@ addComponentStoryDescription(
58101
placeholderDescription
59102
);
60103

61-
const autocompleteClassName = 'cio-autocomplete custom-autocomplete-styles';
104+
autocompleteClassName = 'cio-autocomplete custom-autocomplete-styles';
62105

63106
export const ProvideCustomStyles = ComponentTemplate.bind({});
64107
ProvideCustomStyles.args = { apiKey, onSubmit, autocompleteClassName };

‎src/stories/Autocomplete/Component/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,19 @@ export function ComponentTemplate(args: CioAutocompleteProps) {
77
return <CioAutocomplete {...args} />;
88
}
99

10+
export function FullExampleTemplate(args: CioAutocompleteProps) {
11+
return (
12+
<div className='cio-autocomplete full-example-autocomplete-styles header'>
13+
<svg viewBox='0 0 70 45' width='35' height='35' fill='darkgray' className='menu-icon'>
14+
<rect width='70' height='5' />
15+
<rect y='20' width='70' height='5' />
16+
<rect y='40' width='70' height='5' />
17+
</svg>
18+
<CioAutocomplete {...args} />
19+
</div>
20+
);
21+
}
22+
1023
const componentTemplateCode = `
1124
function YourComponent() {
1225
return (

0 commit comments

Comments
 (0)