Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Workshops
Developer workshop
Commits
c17663d1
Commit
c17663d1
authored
Sep 16, 2020
by
Jon Moore
Browse files
Merge branch 'master' into 'workshop-kj'
Master See merge request
!3
parents
8a9cfa88
888c51f4
Pipeline
#39470
passed with stage
in 3 minutes and 24 seconds
Changes
32
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
.env
View file @
c17663d1
ALIAS=
zenhub
INTERNAL_VIP=10.128.
46.13
2
ACCESS_TOKEN=
sNF3SnNWu6RMAtpzybcOqkHKUlMnEUwrNre0OlD9G8UERroN
PUBLIC_URL=https://live-
zengenti-zenhub
.cloud.contensis.com
/
PROJECT=
zengenti
ALIAS=
workshops-cte-master
INTERNAL_VIP=10.128.
21.8
2
ACCESS_TOKEN=
AfTWtGox8aKdgO85rXXSJrWUXa97BA1aXP4fwaIrliDSvWNz
PUBLIC_URL=https://live-
workshops-cte-master
.cloud.contensis.com
PROJECT=
website
CONTENSIS_VERSION=14
.env.workshops
deleted
100644 → 0
View file @
8a9cfa88
ALIAS=-workshops-cte-master
INTERNAL_VIP=10.128.21.82
ACCESS_TOKEN=AfTWtGox8aKdgO85rXXSJrWUXa97BA1aXP4fwaIrliDSvWNz
PUBLIC_URL=https://live-workshops-cte-master.cloud.contensis.com
PROJECT=website
CONTENSIS_VERSION=14
src/app/core/routes/ContentTypeMappings.js
View file @
c17663d1
...
...
@@ -13,10 +13,10 @@ export default [
}),
},
{
contentTypeID
:
'
exampleCT
'
,
contentTypeID
:
'
blogPost
'
,
component
:
Loadable
({
loader
:
()
=>
{
return
import
(
'
~/pages/
Examples/ExamplePage
'
);
return
import
(
'
~/pages/
Blogs/BlogPost
'
);
},
loading
:
Loading
,
}),
...
...
src/app/core/routes/StaticRoutes.js
View file @
c17663d1
...
...
@@ -10,10 +10,10 @@ export default [
component
:
Homepage
,
},
{
path
:
'
/
example
-listing
'
,
path
:
'
/
blog
-listing
'
,
exact
:
true
,
component
:
Loadable
({
loader
:
()
=>
import
(
'
~/pages/Listings/
Example
Listing.page
'
),
loader
:
()
=>
import
(
'
~/pages/Listings/
Blog
Listing.page
'
),
loading
:
Loading
,
}),
},
...
...
src/app/features/.DS_Store
View file @
c17663d1
No preview for this file type
src/app/features/
example
Listing/components.styled/
Example
Card.styled.js
→
src/app/features/
blog
Listing/components.styled/
Blog
Card.styled.js
View file @
c17663d1
import
styled
,
{
css
}
from
'
styled-components
'
;
const
Example
CardStyled
=
styled
.
article
`
const
Blog
CardStyled
=
styled
.
article
`
${()
=>
{
return
css
`
display: block;
...
...
@@ -30,4 +30,4 @@ const ExampleCardStyled = styled.article`
}}
;
`
;
export
default
Example
CardStyled
;
export
default
Blog
CardStyled
;
src/app/features/
example
Listing/components.styled/
Example
Filters.styled.js
→
src/app/features/
blog
Listing/components.styled/
Blog
Filters.styled.js
View file @
c17663d1
import
styled
,
{
css
}
from
'
styled-components
'
;
import
getIn
from
'
~/utils/getIn
'
;
import
validateProps
from
'
~/utils/validateProps
'
;
const
TreatmentsFiltersStyled
=
styled
.
div
`
${({
theme
,
filtersVisible
})
=>
{
const
mqLarge
=
getIn
([
'
layout
'
,
'
mediaQueries
'
,
'
large
'
],
theme
);
const
visuallyHidden
=
getIn
([
'
patterns
'
,
'
visuallyHidden
'
],
theme
);
validateProps
(
'
TreatmentsFiltersStyled
'
,
{
mqLarge
,
visuallyHidden
});
const
BlogFiltersStyled
=
styled
.
div
`
${()
=>
{
return
css
`
@media only screen and (min-width:
${
mqLarge
}
) {
@media only screen and (min-width:
1024px
) {
padding-right: 32px;
}
...
...
@@ -26,7 +19,7 @@ const TreatmentsFiltersStyled = styled.div`
}
.feLabel {
${
visuallyHidden
}
display: none;
}
.feToggle {
...
...
@@ -59,7 +52,7 @@ const TreatmentsFiltersStyled = styled.div`
.toggleFiltersWrap {
text-align: right;
@media only screen and (min-width:
${
mqLarge
}
) {
@media only screen and (min-width:
1024px
) {
display: none;
}
}
...
...
@@ -79,17 +72,9 @@ const TreatmentsFiltersStyled = styled.div`
background-image: url('/static/img/icons/chevron_down_green.svg');
width: 8px;
height: 5px;
${
filtersVisible
&&
'
transform:rotate(180deg)
'
}
}
}
${
!
filtersVisible
&&
'
.filterGroup:nth-child(1n+4) {display:none}
'
}
;
@media only screen and (min-width:
${
mqLarge
}
) {
${
!
filtersVisible
&&
'
.filterGroup:nth-child(1n+4) {display:block}
'
}
;
}
.feList {
border-top: 1px solid #fff;
list-style: none;
...
...
@@ -104,7 +89,7 @@ const TreatmentsFiltersStyled = styled.div`
}
.feItemInput {
${
visuallyHidden
}
;
display: none
;
}
.feItemInput:checked + .feItemLabel {
...
...
@@ -114,4 +99,4 @@ const TreatmentsFiltersStyled = styled.div`
}}
;
`
;
export
default
Treatments
FiltersStyled
;
export
default
Blog
FiltersStyled
;
src/app/features/
example
Listing/components.styled/
Example
Listing.styled.js
→
src/app/features/
blog
Listing/components.styled/
Blog
Listing.styled.js
View file @
c17663d1
import
styled
,
{
css
}
from
'
styled-components
'
;
const
Example
ListingStyled
=
styled
.
div
`
const
Blog
ListingStyled
=
styled
.
div
`
${()
=>
{
return
css
`
display: flex;
...
...
@@ -8,6 +8,10 @@ const ExampleListingStyled = styled.div`
width: 100%;
max-width: 1200px;
margin: 30px auto;
.resultsInfo {
width: 100%;
margin-bottom: 30px;
}
a {
text-decoration: none;
width: 100%;
...
...
@@ -41,4 +45,4 @@ const ExampleListingStyled = styled.div`
}}
;
`
;
export
default
Example
ListingStyled
;
export
default
Blog
ListingStyled
;
src/app/features/
example
Listing/components.styled/
Example
Record.styled.js
→
src/app/features/
blog
Listing/components.styled/
Blog
Record.styled.js
View file @
c17663d1
import
styled
,
{
css
}
from
'
styled-components
'
;
const
Example
RecordStyled
=
styled
.
div
`
const
Blog
RecordStyled
=
styled
.
div
`
${()
=>
{
return
css
`
display: flex;
...
...
@@ -35,4 +35,4 @@ const ExampleRecordStyled = styled.div`
}}
;
`
;
export
default
Example
RecordStyled
;
export
default
Blog
RecordStyled
;
src/app/features/
event
Listing/components
copy/Example
Card.js
→
src/app/features/
blog
Listing/components
/Blog
Card.js
View file @
c17663d1
...
...
@@ -2,12 +2,12 @@ import React from 'react';
import
PropTypes
from
'
prop-types
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Example
CardStyled
from
'
../components.styled/
Event
Card.styled
'
;
import
Blog
CardStyled
from
'
../components.styled/
Blog
Card.styled
'
;
const
Example
Card
=
({
title
,
description
,
image
,
uri
,
className
})
=>
{
const
Blog
Card
=
({
title
,
description
,
image
,
uri
,
className
})
=>
{
return
(
<
Link
to
=
{
uri
}
>
<
Example
CardStyled
className
=
{
className
}
>
<
Blog
CardStyled
className
=
{
className
}
>
{
image
&&
(
<
img
src
=
{
`
${
image
.
asset
.
sys
.
uri
}
?width=500&height=300&fit=crop`
}
...
...
@@ -18,12 +18,12 @@ const ExampleCard = ({ title, description, image, uri, className }) => {
<
h3
>
{
title
}
<
/h3
>
{
description
&&
<
p
>
{
description
}
<
/p>
}
<
/
Example
CardStyled
>
<
/
Blog
CardStyled
>
<
/Link
>
);
};
Example
Card
.
propTypes
=
{
Blog
Card
.
propTypes
=
{
className
:
PropTypes
.
string
,
title
:
PropTypes
.
string
,
description
:
PropTypes
.
string
,
...
...
@@ -31,4 +31,4 @@ ExampleCard.propTypes = {
uri
:
PropTypes
.
string
,
};
export
default
Example
Card
;
export
default
Blog
Card
;
src/app/features/
event
Listing/components
copy/Example
Filters.js
→
src/app/features/
blog
Listing/components
/Blog
Filters.js
View file @
c17663d1
import
React
,
{
useState
}
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
Example
FiltersStyled
from
'
../components.styled/
Event
Filters.styled
'
;
import
Blog
FiltersStyled
from
'
../components.styled/
Blog
Filters.styled
'
;
import
FilterEntryDropdown
from
'
~/features/listings/components/FilterEntryDropdown
'
;
const
Example
Filters
=
({
className
,
filters
,
updateFilters
})
=>
{
const
Blog
Filters
=
({
className
,
filters
,
updateFilters
})
=>
{
const
[
filtersVisible
,
toggleFilters
]
=
useState
(
false
);
const
renderFilter
=
filterGroup
=>
{
...
...
@@ -41,7 +41,7 @@ const ExampleFilters = ({ className, filters, updateFilters }) => {
};
return
(
<
Example
FiltersStyled
className
=
{
className
}
filtersVisible
=
{
filtersVisible
}
>
<
Blog
FiltersStyled
className
=
{
className
}
filtersVisible
=
{
filtersVisible
}
>
<
div
className
=
"
tfInner
"
>
{
filters
&&
filters
.
map
((
filterGroup
,
idx
)
=>
{
...
...
@@ -60,15 +60,15 @@ const ExampleFilters = ({ className, filters, updateFilters }) => {
<
/button
>
<
/div
>
<
/div
>
<
/
Example
FiltersStyled
>
<
/
Blog
FiltersStyled
>
);
};
Example
Filters
.
propTypes
=
{
Blog
Filters
.
propTypes
=
{
className
:
PropTypes
.
string
,
clearFilters
:
PropTypes
.
func
,
filters
:
PropTypes
.
array
,
updateFilters
:
PropTypes
.
func
,
};
export
default
Example
Filters
;
export
default
Blog
Filters
;
src/app/features/
example
Listing/components/
Example
Listing.js
→
src/app/features/
blog
Listing/components/
Blog
Listing.js
View file @
c17663d1
...
...
@@ -6,14 +6,14 @@ import { selectVersionStatus } from '~/core/redux/selectors';
import
{
Op
,
Query
}
from
'
contensis-delivery-api
'
;
import
{
cachedSearch
}
from
'
~/core/util/ContensisDeliveryApi
'
;
import
Example
ListingStyled
from
'
../components.styled/
Example
Listing.styled
'
;
import
Example
Card
from
'
./
Example
Card
'
;
import
Blog
ListingStyled
from
'
../components.styled/
Blog
Listing.styled
'
;
import
Blog
Card
from
'
./
Blog
Card
'
;
const
fetchEntries
=
async
versionStatus
=>
{
const
triggerSearch
=
async
versionStatus
=>
{
try
{
let
query
=
new
Query
(
Op
.
equalTo
(
'
sys.contentTypeId
'
,
'
exampleCT
'
),
Op
.
equalTo
(
'
sys.contentTypeId
'
,
'
blogPost
'
),
Op
.
equalTo
(
'
sys.versionStatus
'
,
versionStatus
)
);
query
.
pageSize
=
3
;
...
...
@@ -27,19 +27,19 @@ const fetchEntries = async versionStatus => {
return
entries
;
};
const
Example
Listing
=
({
className
})
=>
{
const
Blog
Listing
=
({
className
})
=>
{
const
[
results
,
setResults
]
=
useState
();
const
versionStatus
=
useSelector
(
selectVersionStatus
);
//const versionStatus = 'latest';
useEffect
(()
=>
{
fetchEntries
(
versionStatus
).
then
(
entrie
s
=>
{
setResults
(
entries
.
item
s
);
fetchEntries
(
versionStatus
).
then
(
result
s
=>
{
setResults
(
result
s
);
});
},
[
versionStatus
]);
let
resultsInfo
=
null
;
if
(
results
&&
results
.
totalCount
>
1
)
{
if
(
results
&&
results
.
totalCount
>
0
)
{
const
start
=
results
.
pageIndex
*
results
.
pageSize
+
1
;
let
end
=
results
.
pageSize
;
if
(
end
>
results
.
totalCount
)
end
=
results
.
totalCount
;
...
...
@@ -48,7 +48,7 @@ const ExampleListing = ({ className }) => {
}
return
(
<
Example
ListingStyled
className
=
{
className
}
>
<
Blog
ListingStyled
className
=
{
className
}
>
{
resultsInfo
&&
(
<
div
className
=
"
resultsInfo
"
...
...
@@ -57,9 +57,10 @@ const ExampleListing = ({ className }) => {
)}
{
results
&&
results
.
map
((
entry
,
idx
)
=>
{
results
.
items
&&
results
.
items
.
map
((
entry
,
idx
)
=>
{
return
(
<
Example
Card
<
Blog
Card
title
=
{
entry
.
title
}
description
=
{
entry
.
summary
}
image
=
{
entry
.
image
}
...
...
@@ -69,12 +70,12 @@ const ExampleListing = ({ className }) => {
);
})}
{
!
results
||
(
results
.
length
<
1
&&
<
p
>
No
results
found
.
<
/p>
)
}
<
/
Example
ListingStyled
>
<
/
Blog
ListingStyled
>
);
};
Example
Listing
.
propTypes
=
{
Blog
Listing
.
propTypes
=
{
className
:
PropTypes
.
string
,
};
export
default
Example
Listing
;
export
default
Blog
Listing
;
src/app/features/
event
Listing/components
copy/Exampler
ecord.js
→
src/app/features/
blog
Listing/components
/BlogR
ecord.js
View file @
c17663d1
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
Example
RecordStyled
from
'
../components.styled/
Event
Record.styled
'
;
import
Blog
RecordStyled
from
'
../components.styled/
Blog
Record.styled
'
;
import
ContentComposer
from
'
~/features/composer/components/Composer
'
;
const
Event
Record
=
({
className
,
entry
})
=>
{
const
Blog
Record
=
({
className
,
entry
})
=>
{
if
(
!
entry
)
return
null
;
return
(
<
Example
RecordStyled
className
=
{
className
}
>
<
Blog
RecordStyled
className
=
{
className
}
>
<
div
className
=
"
container
"
>
{
entry
.
image
&&
(
<
img
src
=
{
entry
.
image
.
asset
.
sys
.
uri
}
alt
=
{
entry
.
image
.
altText
}
/
>
...
...
@@ -17,16 +17,16 @@ const EventRecord = ({ className, entry }) => {
<
div
className
=
"
eventContent
"
>
<
h1
className
=
"
pageTitle
"
>
{
entry
.
entryTitle
}
<
/h1
>
{
entry
.
content
&&
<
ContentComposer
composer
=
{
entry
.
c
ontent
}
/>
}
{
entry
.
content
&&
<
ContentComposer
composer
=
{
entry
.
postC
ontent
}
/>
}
<
/div
>
<
/div
>
<
/
Example
RecordStyled
>
<
/
Blog
RecordStyled
>
);
};
Event
Record
.
propTypes
=
{
Blog
Record
.
propTypes
=
{
className
:
PropTypes
.
string
,
entry
:
PropTypes
.
object
,
};
export
default
Event
Record
;
export
default
Blog
Record
;
src/app/features/
example
Listing/stories/
Example
Card.stories.js
→
src/app/features/
blog
Listing/stories/
Blog
Card.stories.js
View file @
c17663d1
import
React
from
'
react
'
;
import
{
storiesOf
}
from
'
@storybook/react
'
;
import
{
text
}
from
'
@storybook/addon-knobs
'
;
import
Example
Card
from
'
~/features/
example
Listing/components/
Example
Card
'
;
import
Blog
Card
from
'
~/features/
blog
Listing/components/
Blog
Card
'
;
storiesOf
(
'
Features | Listings
'
,
module
).
add
(
'
Example
card
'
,
'
Blog
card
'
,
()
=>
{
return
(
<
Example
Card
<
Blog
Card
title
=
{
text
(
'
Title
'
,
'
Example Title
'
)}
description
=
{
text
(
'
Title
'
,
'
Example description
'
)}
uri
=
"
/
example-content
/example-
article
"
uri
=
"
/
blog
/example-
post
"
/>
);
},
...
...
src/app/features/components/link/ExtSvg.js
deleted
100644 → 0
View file @
8a9cfa88
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
styled
from
'
styled-components
'
;
const
ExtSvg
=
styled
(({
className
})
=>
{
return
(
<
svg
className
=
{
className
}
xmlns
=
"
http://www.w3.org/2000/svg
"
title
=
"
(opens new window)
"
width
=
"
16
"
height
=
"
16
"
viewBox
=
"
0 0 24 24
"
fill
=
"
none
"
strokeLinecap
=
"
square
"
strokeLinejoin
=
"
arcs
"
>
<
g
fill
=
"
none
"
fillRule
=
"
evenodd
"
>
<
path
d
=
"
M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8
"
/>
<
/g
>
<
/svg
>
);
})
`
${({
theme
:
{
swatch
}
})
=>
`
position: relative;
top: 2px;
margin-left: 4px;
stroke:
${
swatch
.
link
.
initial
}
;
stroke-width: 2px;
`
}
;
`
;
ExtSvg
.
propTypes
=
{
className
:
PropTypes
.
string
,
};
ExtSvg
.
defaultProps
=
{};
export
default
ExtSvg
;
src/app/features/components/link/Link.js
deleted
100644 → 0
View file @
8a9cfa88
import
React
from
'
react
'
;
import
PropTypes
from
'
prop-types
'
;
import
styled
from
'
styled-components
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
ExtSvg
from
'
./ExtSvg
'
;
const
RoutedLink
=
styled
(
({
text
,
path
,
titleattr
,
target
,
onClick
,
onBlur
,
children
,
srHidden
,
tabIndex
,
noIcon
,
style
,
// staticLink,
className
,
})
=>
{
let
setTarget
=
''
;
let
targetAuto
=
false
;
let
manaulExtIcon
=
false
;
if
(
target
)
{
if
(
target
.
toLowerCase
()
===
'
new window
'
)
{
manaulExtIcon
=
true
;
setTarget
=
'
_blank
'
;
}
else
if
(
target
.
toLowerCase
()
===
'
none
'
)
{
setTarget
=
''
;
}
else
if
(
target
.
toLowerCase
()
===
'
auto detect
'
)
{
targetAuto
=
true
;
}
else
{
setTarget
=
target
;
}
}
if
(
process
.
env
.
NODE_ENV
===
'
development
'
)
{
if
(
!
path
)
{
return
(
<
a
className
=
{
className
}
href
=
"
#no-location-set
"
>
<
span
className
=
"
no-location
"
>
No
location
set
-
<
/span
>
{
text
}
{
children
&&
children
}
<
/a
>
);
}
}
// if (staticLink) {
// return (
// <a
// href={path}
// className={className}
// style={style}
// aria-hidden={srHidden}
// tabIndex={tabIndex}
// onClick={onClick}
// onBlur={onBlur}
// title={titleattr}
// target={setTarget}
// >
// {text}
// {children && children}
// </a>
// );
// }
if
(
path
&&
(
path
.
includes
(
'
https://www.canterbury.ac.uk
'
)
||
path
.
includes
(
'
http://www.canterbury.ac.uk
'
)
||
path
.
includes
(
'
www.canterbury.ac.uk
'
)
||
path
.
includes
(
'
canterbury.ac.uk
'
))
)
{
return
(
<
a
href
=
{
path
}
className
=
{
className
}
style
=
{
style
}
aria
-
hidden
=
{
srHidden
}
tabIndex
=
{
tabIndex
}
onClick
=
{
onClick
}
onBlur
=
{
onBlur
}
title
=
{
titleattr
}
target
=
{
setTarget
}
>
{
text
}
{
children
&&
children
}
<
/a
>
);
}
else
if
(
path
&&
(
path
.
includes
(
'
.pdf
'
)
||
path
.
includes
(
'
.xlsx
'
)
||
path
.
includes
(
'
.doc
'
)
||
path
.
includes
(
'
.xml
'
)
||
path
.
includes
(
'
.csv
'
)
||
path
.
includes
(
'
.zip
'
)
||
path
.
includes
(
'
.ics
'
))
)
{
return
(
<
a
href
=
{
path
}
className
=
{
className
}
rel
=
"
noopener noreferrer
"
target
=
{
target
&&
!
targetAuto
?
setTarget
:
'
_blank
'
}
style
=
{
style
}
aria
-
hidden
=
{
srHidden
}
tabIndex
=
{
tabIndex
}
onClick
=
{
onClick
}
onBlur
=
{
onBlur
}
title
=
{
titleattr
}
>
{
text
}
{
children
&&
children
}
<
/a
>
);
}
else
if
(
path
&&
(
path
.
includes
(
'
facebook.com
'
)
||
path
.
includes
(
'
twitter.com
'
)
||
path
.
includes
(
'
youtube.com
'
)
||
path
.
includes
(
'
linkedin.com
'
))
)
{
return
(
<
a
href
=
{
path
}
className
=
{
className
}
rel
=
"
noopener noreferrer
"
target
=
{
target
&&
!
targetAuto
?
setTarget
:
'
_blank
'
}
style
=
{
style
}
aria
-
hidden
=
{
srHidden
}
tabIndex
=
{
tabIndex
}
onClick
=
{
onClick
}
onBlur
=
{
onBlur
}
title
=
{
titleattr
}
>
{
text
}
{
children
&&
children
}
<
/a
>
);
}
else
if
(
path
&&
(
path
.
includes
(
'
http://
'
)
||
path
.
includes
(
'
https://
'
)
||
path
.
includes
(
'
wwww.
'
))
)
{
return
(
<
a
href
=
{
path
}
className
=
{
className
}
rel
=
"
noopener noreferrer
"
target
=
{
target
&&
!
targetAuto
?
setTarget
:
'
_blank
'
}
style
=
{
style
}
aria
-
hidden
=
{
srHidden
}
tabIndex
=
{
tabIndex
}
onClick
=
{
onClick
}